import React, { Component, Fragment } from "react";
// antd
import { Modal, Table, Button, Col, Pagination, Form, Input, message, Tag, Select, InputNumber, Switch } from "antd";
import Action from "@c/buttonAction/Index";
// http
import http from '../../utils/request';
const { Option } = Select;

class ProjectManage extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            dataSource: [],
            columns: [
                {title: "名称", dataIndex: "project", key: "project",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.project}</Tag>
                            </div>
                        )
                    }
                },
                {title: "标签", dataIndex: "profile", key: "profile"},
                {title: "地址", dataIndex: "address", key: "address"},
                {title: "最小/最大POD数", dataIndex: "pod_num", key: "pod_num",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="orange">{rowData.pod_min}/{rowData.pod_max}</Tag>
                            </div>
                        )
                    }
                },
                {title: "沉默周期/分", dataIndex: "period", key: "period"},
                {title: "开关", dataIndex: "switch", key: "switch",
                    render: (text, rowData) => {
                        console.log("switch: ", rowData.switch)
                        return (
                            <Switch 
                                size="small" 
                                defaultChecked={rowData.switch} 
                                onClick={() => this.onChangeSwitch(rowData.id)} 
                            />
                        )
                    }
                },
                {title: "通知Token", dataIndex: "token", key: "token"},
                {title: "业务URL", dataIndex: "url", key: "url"},
                {title: "集群", dataIndex: "kubernetes_name", key: "kubernetes_name"},
                {title: "操作", dataIndex: "operation", key: "operation", fixed: 'right',
                    render: (text, rowData) => {
                        return (
                            <div className="inline-button">
                                <Action>
                                    <Action.Button onClick={() => this.onEditBtn({rowData: rowData, status: true})}>编辑</Action.Button>
                                    <Action.Button onClick={() => this.onDeleteBtn(rowData)}>删除</Action.Button>
                                </Action>
                                <div></div>
                                <Action>
                                    <Action.Button onClick={() => this.onMessageBtn(rowData)}>消息</Action.Button>
                                    <Action.Button onClick={() => this.onUrlBtn(rowData)}>接口</Action.Button>
                                </Action>                               
                            </div>
                        )
                    }           
                }
            ],
            loading: false,
            search_option_kubernetes: null,
            search_project: null,
            search_url: null,
            search_address: null,
            visible_add: false,     // 添加
            visible_edit: false,    // 编辑
            visible_delete: false,  // 删除
            visible_edit_id: '',
            visible_edit_name: '',
            visable_edit_code: '',
            eci_id: null,
            project: null,
        }
        this.formRefAdd = React.createRef();
        this.formRefEdit = React.createRef();
        this.formRefMsg = React.createRef();
    }

    componentDidMount() {
        this.loadData()
        this.loadDataKubernetes()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'project__contains': this.state.search_project,
            'url__contains': this.state.search_url,
            'address__contains': this.state.search_address,
        }

        // 获取分组列表
        http.get('/eci/project', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    /** 获取集群信息 */
    loadDataKubernetes = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
            'resource_type': 'kubernetes',
        }
        http.get('/cloud/kubernetes/list', {params: requestData}).then(response=>{
            const search_option_kubernetes = []
            const resp_data = response.data.data.items
            for (let i = 0; i < resp_data.length; i++) {
                search_option_kubernetes.push(<Option key={resp_data[i].instance_id}>{resp_data[i].name}</Option>)
            }
            this.setState({
                search_option_kubernetes: search_option_kubernetes
            })
        })
    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }

    /** 搜索 */
    onFinishSearch = (data) => {
        this.setState({
            page: 1,
            search_project: data.project ? data.project : null,
            search_url: data.url ? data.url : null,
            search_address: data.address ? data.address : null,
        })
        this.loadData()
    }

    /** 添加按钮 */
    onAddBtn = () => {
        this.setState({
            visible_add: true
        })
    }

    /** 添加业务线取消 */
    onFinishAddCancel = () => {
        this.setState({
            visible_add: false
        })
        this.formRefAdd.current.resetFields()
    }

    /** 添加提交 */
    onFinishAdd = (data) => {
        const requestData = {
            project: data.project,
            profile: data.profile,
            address: data.address,
            url: data.url,
            token: data.token,
            kubernetes: data.kubernetes,
            sign: data.sign,
            pod_min: data.pod_min,
            pod_max: data.pod_max,
            period: data.period
        }
        http.post('/eci/project', requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_add: false,
            })
            this.formRefAdd.current.resetFields()
            this.loadData()
        }).catch()
    }

    /** 消息测试 */
    onMessageBtn = (data) => {
        const requestData = {
            'operation_type': 'push_test_msg',
        }
        http.patch('/eci/project/' + data.id, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_add: false,
            })
            this.formRefAdd.current.resetFields()
            this.loadData()
        }).catch()
    }

    /** 业务接口测试 */
    onUrlBtn = (data) => {
        const requestData = {
            'operation_type': 'push_url_msg',
        }
        http.patch('/eci/project/' + data.id, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_add: false,
            })
            this.formRefAdd.current.resetFields()
            this.loadData()
        }).catch()
    }

    /** 编辑按钮 */
    onEditBtn = (data) => {
        http.get('/eci/project').then(response=>{
            this.formRefEdit.current.setFieldsValue({
                id: data.rowData.id,
                project: data.rowData.project,
                profile: data.rowData.profile,
                url: data.rowData.url,
                sign: data.rowData.sign,
                token: data.rowData.token,
                address: data.rowData.address,
                kubernetes: data.rowData.kubernetes,
                pod_min: data.rowData.pod_min,
                pod_max: data.rowData.pod_max,
                period: data.rowData.period
            })
        }).catch()
        this.setState({
            visible_edit: true,
        })
    }

    /** 编辑取消 */
    onFinishEditCancel = () => {
        this.setState({
            visible_edit: false,

        })
        this.formRefEdit.current.resetFields();
    }

    /** 编辑提交 */
    onFinishEdit = (data) => {
        const requestData = {
            id: data.id,
            project: data.project,
            profile: data.profile,
            address: data.address,
            token: data.token,
            sign: data.sign,
            url: data.url,
            kubernetes: data.kubernetes,
            pod_min: data.pod_min,
            pod_max: data.pod_max,
            period: data.period
        }
        http.put('/eci/project/' + data.id, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_edit: false
            })
            this.formRefEdit.current.resetFields();
            this.loadData()
        }).catch()
    }

    /** 删除按钮 */
    handleDelete = () => {
        http.delete('/eci/project/' + this.state.eci_id).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_delete: false,
            })
            this.loadData()
        }).catch()    
    }

    /** 删除提交 */
    onDeleteBtn = (data) => {
        this.setState({
            eci_id: data.id,
            project: data.project,
            visible_delete: true,
            page: 1,
        })
    }

    /** 切换开关 */
    onChangeSwitch = (id) => {
        const requestData = {
            operation_type: 'change_switch',
        }
        http.patch('/eci/project/' + id, requestData).then(response=>{})
    }

    render(){
        const { loading, dataSource, columns, page, total, visible_add, visible_edit, visible_delete, project, search_option_kubernetes } = this.state
        const rowSelection = {
            onChange: this.onCheckbox
        }
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch}>
                    <Form.Item label="名称" name="project">
                        <Input placeholder="请输入项目名称"  />
                    </Form.Item>

                    <Form.Item label="地址" name="address">
                        <Input placeholder="请输入项目SLB地址"  />
                    </Form.Item>

                    <Form.Item label="URL" name="url">
                        <Input placeholder="请输入业务URL地址"  />
                    </Form.Item>

                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>
                
                <div style={myStyle1}><Button type="primary" onClick={this.onAddBtn}>添加ECI项目</Button></div>
                <Table
                    size="small"
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 600, x: 1800 }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

                <Modal
                    title="添加ECI项目信息"
                    visible={visible_add}
                    onCancel={this.onFinishAddCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width={600}
                >
                    <Form
                        onFinish={this.onFinishAdd}
                        ref={this.formRefAdd}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="项目名称" name="project" rules={[{ required: true}]}>
                            <Input placeholder="英文名称"></Input>
                        </Form.Item>

                        <Form.Item label="项目标签" name="profile" rules={[{ required: true}]}>
                            <Input placeholder="jst/eci/eci-add"></Input>
                        </Form.Item>

                        <Form.Item label="项目SLB地址" name="address" rules={[{ required: true}]}>
                            <Input placeholder="192.168.x.x:3xxxx"></Input>
                        </Form.Item>

                        <Form.Item label="通知Token" name="token" rules={[{ required: true}]}>
                            <Input placeholder="通知ECI动态伸缩的钉钉群Token"></Input>
                        </Form.Item>

                        <Form.Item label="业务URL" name="url" rules={[{ required: true}]}>
                            <Input placeholder="获取POD数量的业务接口, POST方式请求"></Input>
                        </Form.Item>

                        <Form.Item label="业务Sign" name="sign" rules={[{ required: true}]}>
                            <Input placeholder="业务接口认证口令"></Input>
                        </Form.Item>

                        <Form.Item label="最小POD数" name="pod_min" rules={[{ required: true}]}>
                            <InputNumber style={{ width: '100%' }} />
                        </Form.Item>

                        <Form.Item label="最大POD数" name="pod_max" rules={[{ required: true}]}>
                            <InputNumber style={{ width: '100%' }}></InputNumber>
                        </Form.Item>

                        <Form.Item label="容器集群" name="kubernetes" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择集群"
                                >
                                {search_option_kubernetes}
                            </Select>
                        </Form.Item>

                        <Form.Item label="通知周期" name="period" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择周期"
                                >
                                <Option key="5">5分钟</Option>
                                <Option key="10">10分钟</Option>
                                <Option key="30">30分钟</Option>
                                <Option key="60">1小时</Option>
                                <Option key="180">3小时</Option>
                                <Option key="360">6小时</Option>
                                <Option key="720">12小时</Option>
                                <Option key="1440">24小时</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="编辑ECI项目信息"
                    visible={visible_edit}
                    onCancel={this.onFinishEditCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width={800}
                >
                    <Form
                        onFinish={this.onFinishEdit}
                        ref={this.formRefEdit}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="ID" name="id" rules={[{ required: true}]} hidden>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="名称" name="project" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="标签" name="profile" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="地址" name="address" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="通知Token" name="token" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="业务URL" name="url" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="业务Sign" name="sign" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="最小POD数" name="pod_min" rules={[{ required: true}]}>
                            <InputNumber style={{ width: '100%' }} />
                        </Form.Item>

                        <Form.Item label="最大POD数" name="pod_max" rules={[{ required: true}]}>
                            <InputNumber style={{ width: '100%' }}></InputNumber>
                        </Form.Item>

                        <Form.Item label="容器集群" name="kubernetes" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择云平台"
                                >
                                {search_option_kubernetes}
                            </Select>
                        </Form.Item>

                        <Form.Item label="通知周期" name="period" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择周期"
                                >
                                <Option key="5">5分钟</Option>
                                <Option key="10">10分钟</Option>
                                <Option key="30">30分钟</Option>
                                <Option key="60">1小时</Option>
                                <Option key="180">3小时</Option>
                                <Option key="360">6小时</Option>
                                <Option key="720">12小时</Option>
                                <Option key="1440">24小时</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>
                    </Form>           
                </Modal>

                <Modal
                    title="删除ECI项目"
                    visible={visible_delete}
                    onOk={this.handleDelete}
                    onCancel={() => {this.setState({visible_delete: false, eci_id: ''})}}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确定删除ECI项目<span style={{color: 'red'}}> {project}</span>? 删除后将无法恢复</p>
                </Modal>
            </Fragment>
        )
    }
}
export default ProjectManage;